<template>
  <div class="tabs">
    <div class="topNav" id="topNav">
      <ul id="topNavUl">
        <li v-for="(i,index) in tabList" :key="index" @click="goCenter(i,i.guid,index,$event)" :class="{current: i.guid === currentTopNav}">{{ i.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentTopNav:0,//套餐下标
      }
    },
    props:['tabList','changeTabOne'],
    mounted() {

    },
    methods:{
      // 点击滑动到中间
      goCenter(item, guid, index, e) {
        let destination = index - 2;
        destination = destination < 0 ? 1 : destination;
        // 切换的是一级分类 下标为0 初始值
        this.currentTopNav = guid;
        // console.log(this.currentTopNav)
        if (this.navScroll) {
          this.navScroll.scrollToElement(
            document.querySelector('#topNav li:nth-child(' + destination + ')')
          );
        }
        this.$emit('goCenter',item)

        // 横向滑动居中
        let ul = document.querySelector('#topNavUl');
        let nav = document.getElementById("topNav");
        let window_offsetWidth = window.innerWidth; //屏幕宽度;
        let dom = e.target;
        if (dom) {
          let domoffsetWidth = dom.offsetLeft,
            //中间值 =( 屏幕宽度 - li宽度 ) / 2;
            diffWidth = (window_offsetWidth - dom.offsetWidth) / 2,
            //目标值 = offset - 中间值
            targetOffset = -(domoffsetWidth - diffWidth);
          let ul_width = ul.getBoundingClientRect().width;//开始

          // 未超出中间值
          if (-targetOffset < 0) {
            nav.scrollLeft = 0;
            return;
          }
          //末尾
          if(targetOffset <  window_offsetWidth - ul_width ){
            nav.scrollLeft = -(window_offsetWidth - ul_width);
            return;
          }
          //正常
          nav.scrollLeft = -targetOffset
        }


      },
    },
    watch:{
      tabList(val,oldVal){
        if(val!==oldVal){
          this.currentTopNav = 0;
        }
      }
    }

  }
</script>

<style lang="less" scoped>
  @import (reference) url(../assets/less/common);
  .tabs{
    width:100%;
    .topNav {
      height: 0.88rem;
      display: flex;
      flex-flow:row nowrap;
      overflow-x: auto;
      ul {
        display: inline-block;
        white-space: nowrap;
        li {
          display: inline-block;
          line-height: 0.88rem;
          font-size:@fontSize28;
          font-weight: @fontWeight400;
          font-family: @fontFamily500;
          color:#ffffff;
          padding:0 0.4rem;
          box-sizing: border-box;
          &:first-child {
          }
          &:last-child {
          }
          &.current {
            position: relative;
            font-weight: @fontWeight400;
            font-family: @fontFamily500;
            color:#FEA300;
            &:after {
              /*content: '';*/
              /*height: 0.04rem;*/
              /*width: 0.6rem;*/
              /*border-radius: 0.2rem;*/
              /*background-color: #000000;*/
              /*position: absolute;*/
              /*bottom: 0rem;*/
              /*left: 50%;*/
              /*transform: translateX(-50%);*/
            }
          }
        }
      }
    }
  }
</style>
